<template>
  <div>
    <div class="page">
      <el-form
        ref="addForm"
        :model="addForm"
        :rules="addRules"
        label-position="left"
        label-width="100px"
      >
        <div class="top-title-box">
          <span>专业及部门: 财务</span>
          <span style="margin-left: 20px">员工工号: 0002</span>
        </div>
        <el-form-item
          v-if="!!addForm.delivUnit"
          label="档案分类"
          style="width: 50vw"
        >
          <el-button
            v-show="show"
            type="primary"
            size="mini"
            @click="getAllDeptCategory()"
          >获取本专业/部门的档案分类</el-button>
          <el-radio-group
            v-model="addForm.archCateCode"
            size="small"
            @input="getSectList"
          >
            <el-radio-button
              v-for="item in ACList"
              :key="item.archCateId"
              :label="item.archCateCode"
            >
              <span>{{ item.archCateName }}</span>
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="!!addForm.delivUnit" label="宗号" prop="sect">
          <!-- <el-input class="input" oninput="this.value = this.value.replace(/[^0-9]/g, '');"
            v-model="addForm.archMainCode"></el-input> -->
          <el-select
            v-model="addForm.sect"
            class="search-input"
            filterable
            size="small"
            placeholder="请选择宗号"
            style="width: 20vw"
            @change="selectSect"
          >
            <el-option
              v-for="item in sectList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="!!addForm.archMainCode" label="档案编号">
          <!-- <span>{{ addForm.archMainCode }}</span> -->
          <el-input
            v-model="addForm.archMainCode"
            disabled
            style="width: 20vw"
          />
        </el-form-item>
        <el-form-item label="档案名称" prop="archTitle">
          <el-input
            v-model="addForm.archTitle"
            class="input"
            style="width: 20vw"
          />
        </el-form-item>
        <el-form-item label="热点标签">
          <el-select
            v-model="addForm.archDeptHotName"
            clearable
            placeholder="请选择热点标签"
            style="width: 20vw"
          >
            <el-option
              v-for="item in hotLabels"
              :key="item.archDeptCateCode"
              :label="item.archDeptHotName"
              :value="item.archDeptHotName"
            />
          </el-select>
          <el-button
            type="primary"
            size="small"
            style="margin-left: 10px"
            icon="el-icon-plus"
            @click="HandleAddHot"
          >新增热点标签</el-button>
        </el-form-item>
        <el-form-item label="档案保管期" prop="archPeriod">
          <el-input-number
            v-model="addForm.archPeriod"
            :step="12"
            style="width: 150px"
            oninput="this.value = this.value.replace(/[^0-9]/g, '');"
            placeholder="0为永久"
          />
          <span style="color: #56575b"> 月( 0为永久 )</span>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="addForm.notes"
            class="input"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
        <!-- <el-form-item label="档案规范其他需求">
        <el-input v-model="addForm.archRequireOther"></el-input>
      </el-form-item> -->
        <el-form-item label="档案附件">
          <el-upload
            style="width: 40vw"
            :before-upload="beforeUpload"
            :http-request="uploadFile"
            :file-list="fileList"
            :limit="10"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            action=""
          >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-upload"
            >上传附件</el-button>
            <div slot="tip" class="el-upload__tip">
              支持常见的文件格式:pdf,doc/docx,excel,jpg/png等
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: center">
      <el-button
        type="primary"
        class="submit-button"
        @click="submit()"
      >提 交</el-button>
      <el-button class="submit-button" @click="goBack()">返 回</el-button>
    </div>
    <el-dialog title="新增热点标签" :visible.sync="addHotDialog" width="45%">
      <el-form
        ref="addHotForm"
        :model="addHotForm"
        :rules="addHotRules"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="热点标签名" prop="archDeptHotName">
          <el-input
            v-model="addHotForm.archDeptHotName"
            placeholder="请输入热点标签，热点标签不可重复添加"
          />
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input
            v-model="addHotForm.notes"
            class="input"
            type="textarea"
            :rows="3"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addHotDialog = false">取 消</el-button>
        <el-button type="primary" @click="addHotPoint">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllArchDept } from '@/api/archDept'
import { getAllDeptCategory } from '@/api/archDeptCate'
import { addArchMain, getSectList, getArchMainCode } from '@/api/archManage'
import { addHotpoint, qryHotpoint } from '@/api/archHotPoint'
import { uploadFile } from '@/api/file'
export default {
  data() {
    return {
      radio: 1,
      addForm: {
        archCateCode: '',
        sect: '', // 宗号
        archMainCode: '', // 档案编号
        archTitle: '',
        archDeptHotName: '',
        delivUnit: '',
        archPeriod: '',
        archState: '1', // 5=归档接受 实物归档默认接收
        archRequireOther: '',
        auditUser: '',
        accessState: '',
        notes: ''
      },
      sectList: [], // 宗号列表
      addHotForm: {
        archDeptHotName: '',
        notes: ''
      },
      addHotDialog: false,
      ACList: [],
      dpData: [],
      hotLabels: [],
      addRules: {
        archTitle: [
          { required: true, message: '请输入档案名', trigger: 'blur' }
        ],
        sect: [{ required: true, message: '请选择宗号', trigger: 'change' }],
        archPeriod: [
          {
            required: true,
            message: '请输入保管期,0为永久',
            trigger: 'change'
          }
        ]
      },
      addHotRules: {
        archDeptHotName: [
          { required: true, message: '请输入热点标签名', trigger: 'blur' }
        ]
      },
      show: true,
      fileList: []
    }
  },
  mounted() {
    const user = JSON.parse(sessionStorage.getItem('userInfo'))
    this.addForm.auditUser = user.username
    this.getData()
  },
  methods: {
    getHotPoint() {
      qryHotpoint({
        pageNum: -1,
        pageSize: -1,
        archDeptCateCode:
          this.addForm.delivUnit + '-' + this.addForm.archCateCode
      }).then((res) => {
        if (res.code === '0') {
          this.hotLabels = res.data.records
          this.addHotDialog = false
        }
      })
    },
    // 获取档案分类
    async getAllDeptCategory(item) {
      await getAllDeptCategory({
        pageNum: -1,
        pageSize: -1,
        archDeptName: '财务'
      }).then((res) => {
        if (res.code === '0') {
          this.show = false
          this.ACList = res.data.records
          this.addForm.archCateCode = res.data.records[0].archCateCode
          this.addForm.archMainCode = ''
          this.getSectList()
          this.getHotPoint()
        }
      })
    },
    // 获取部门
    async getData() {
      await getAllArchDept({ pageNum: -1, pageSize: -1 }).then((res) => {
        if (res.code === '0') {
          this.dpData = res.data.records
          this.addForm.delivUnit = res.data.records[0].archDeptCode
          // this.getAllDeptCategory(res.data.records[0]);
        }
      })
    },
    addHotPoint() {
      this.$refs['addHotForm'].validate((valid) => {
        if (valid) {
          const param = {
            ...this.addHotForm,
            archDeptCateCode:
              this.addForm.delivUnit + '-' + this.addForm.archCateCode,
            archDeptHotType: '0'
          }
          addHotpoint(param).then((res) => {
            if (res.code === '0') {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.addForm.archDeptHotName = this.addHotForm.archDeptHotName
              this.getHotPoint()
            }
          })
        }
      })
    },
    getSectList() {
      if (!this.addForm.delivUnit) {
        return this.$message.warning(`请选择部门`)
      }
      if (!this.addForm.archCateCode) {
        return this.$message.warning(`请选择档案分类`)
      }
      const param = {
        archDeptCode: this.addForm.delivUnit,
        archCateCode: '02' // this.addForm.archCateCode,
      }
      getSectList(param).then((res) => {
        if (res.code === '0') {
          this.sectList = res.data
          this.addForm.sect = res.data[0]
          this.selectSect(res.data[0])
        }
      })
    },
    selectSect(key) {
      const param = {
        archDeptCode: this.addForm.delivUnit,
        archCateCode: this.addForm.archCateCode,
        sect: key
      }
      getArchMainCode(param).then((res) => {
        if (res.code === '0') {
          this.addForm.archMainCode = res.data
        }
      })
    },
    // 超过限制数量
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    // 移除文件钩子
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    beforeUpload() {
      this.$refs['addForm'].validate((valid) => {
        if (!valid) {
          this.$message.warning(`上传文件失败,请录入前置数据`)
        }
      })
      return this.$refs['addForm'].validate()
    },
    uploadFile(info) {
      const { file } = info
      this.file = file
      const formData = new FormData()
      formData.append('file', file)
      formData.append('archMainCode', this.addForm.archMainCode)
      // 调用上传接口
      try {
        // 调上传接口
        uploadFile(formData).then((res) => {
          if (res.code === '0') {
            this.$message({
              message: '文件上传成功',
              type: 'success'
            })
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    submit() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          const param = {
            ...this.addForm,
            archDeptCode: this.addForm.delivUnit
          }
          addArchMain(param).then((res) => {
            if (res.code === '0') {
              this.$message({
                message: '录入成功',
                type: 'success'
              })
              this.goBack()
            }
          })
        }
      })
    },
    HandleAddHot() {
      this.addHotForm = {
        archDeptHotName: '',
        notes: ''
      }
      this.addHotDialog = true
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.page {
  margin-top: 20px;
  padding-left: 15px;
}
.top-title {
  font-size: 16px;
  text-align: center;
  margin: 20px 15px 0 15px;
  text-align: left;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #eee;
}

.input {
  width: 40vw;
}

.submit-button {
  width: 100px;
}
.el-upload__tip {
  margin-top: -5px;
  font-size: 11px;
}
.top-title-box {
  font-size: 14px;
  color: #606266;
  font-weight: bold;
  margin-bottom: 10px;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
</style>
